<template>
  <div
    class="dialogContainer"
    :style="getDialogContainerStyle"
    v-show="showMask"
    @click="clickMask"
  >
    <div class="dialog" :style="getDialogStyle">
      <div class="margin" :style="getDialogMarginStyle">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
import {
  WIDTH_PHONE,
  PHONE_RATIO,
  WIDTH_SPREADED,
  SPREADED_RATIO,
  WIDTH_PAD_PORTRAIT,
  PAD_PORTRAIT_RATIO,
  WIDTH_PAD_LANDSCAPE,
  PAD_LANDSCAPE_RATIO,
  WIDTH_STANDARD,
  SPREADED_SCREEN_RATIO,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenDpr,
  screenType,
  screenDescription,
  isIOS,
  isSpreadOn,
  screenSize,
  getSecondPageMarginStyle,
  getSecondPageStyle,
  getDialogFlexAlign,
  getDialogStyle,
  getSingleButtonStyle,
  setScreenResizeListener,
  itemWidth,
} from "../../../assets/js/flexible.js";
export default {
  props: {
    deviceTypePro: {
      type: Number,
      default: 1,
    },
    value: false,
    visiblePro: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showMask: false,
      deviceType: 1,
    };
  },
  mounted() {
    this.deviceType = screenType;
  },
  computed: {
    getDialogContainerStyle() {
      return getDialogFlexAlign(this.deviceType);
    },
    getDialogStyle() {
      return getDialogStyle(this.deviceType);
    },
    getDialogMarginStyle() {
      switch (this.deviceType) {
        case 101: //iPhone
          return {
            width:
              flexibleWidth - screenSize(12.0) * 2 - screenSize(48.0) + "px",
          };
        case 102: //iPad
          //pad竖屏：占据4个等分
          return {
            width:
              itemWidth() * 4 + screenSize(12.0) * 3 - screenSize(48.0) + "px",
          };
        case 1: //android手机
          return {
            width:
              flexibleWidth - screenSize(12.0) * 2 - screenSize(48.0) + "px",
          };
        case 2: //android Pad竖屏
          //pad竖屏：占据4个等分
          return {
            width:
              itemWidth() * 4 + screenSize(12.0) * 3 - screenSize(48.0) + "px",
          };
        case 3: //android Pad横屏
          return {
            width:
              flexibleWidth - screenSize(12.0) * 2 - screenSize(48.0) + "px",
          };
        case 4: //android 折叠屏
          //折叠屏：占据4个等分
          return {
            width:
              itemWidth() * 4 + screenSize(12.0) * 3 - screenSize(48.0) + "px",
          };
        default:
          return {
            width:
              flexibleWidth - screenSize(12.0) * 2 - screenSize(48.0) + "px",
          };
      }
    },
  },
  methods: {
    clickMask() {
      this.$emit("update:visible", false);
      this.$emit("clickDialogClose");
      this.showMask = false;
    },
    closeMask() {
      this.showMask = false;
    },
  },
  mounted() {
    this.showMask = this.visiblePro;
  },
  watch: {
    visiblePro(newVal) {
      this.showMask = newVal;
    },
    deviceTypePro(newVal) {
      this.deviceType = newVal;
    },
  },
};
</script>
<style scoped>
.dialogContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--current-dialog-mask-bg);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
}
.dialogContainer .dialog {
  width: 48px;
  border-radius: 24px;
  background: var(--current-card-background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dialogContainer .dialog .margin {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background: #ffff00; */
}
</style>
